import {ScrollView, View, Text, Image, Input} from '@tarojs/components';
import React, {Component} from 'react';
import Taro, {getCurrentInstance} from '@tarojs/taro';
import {connect} from 'react-redux';
import './index.less';
import * as T from './types';
import actions from './actions';
import {store2Props} from './selectors';
import searchImg from '@/assets/image/index/g_search.png';
import searchDel from '@/assets/image/community/search_del.png';
import Post from './components/post';
actions().actions.loadReducer();
// @ts-ignore
@connect<Partial<T.IProps>, any>(store2Props, actions)
export default class Index extends Component<Partial<T.IProps>, any> {
  constructor(props) {
    super(props);
    this.state = {
      searchValue: '',
      //本地查询的搜索历史记录
      searchHistory: [],
      //是否显示搜索信息
      isShowRes: false,
      autoFocus: false,
    };
  }

  componentDidMount() {}

  componentDidShow() {}

  componentWillUnmount() {
    this.props.actions.clean();
  }

  render() {
    let {name, selectDistance, searchHistory} = this.state;
    let {main, actions} = this.props;
    let {list} = main;
    return (
      <View className="packageASelectAddress">
        <View className="searchBar">
          <View className="content">
            <Image
              src={searchImg}
              className="imgIcon"
              mode="widthFix"
              onClick={() => {
                actions.init(name);
              }}
            />
            <Input
              className="searchText"
              maxlength={16}
              type="text"
              placeholderClass="searchText1"
              placeholder="请输入关键字搜索"
              onInput={(e) => {
                let str = '';
                if (e.detail.value) {
                  let zz = e.detail.value.replace(
                    /[^\u0020-\u007E\u00A0-\u00BE\u2E80-\uA4CF\uF900-\uFAFF\uFE30-\uFE4F\uFF00-\uFFEF\u0080-\u009F\u2000-\u201f\u2026\u2022\u20ac\r\n]/g,
                    '',
                  );
                  str = zz.replace(/[`~!@#$%^&*()=+|{}.<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？':;']/g, '');
                }
                this.setState({
                  name: str,
                });
              }}
              onConfirm={(e) => {
                actions.init(e.detail.value);
              }}
            />
          </View>
          <View
            className="btn"
            onClick={() => {
              Taro.navigateBack();
            }}
          >
            <Text>取消</Text>
          </View>
        </View>

        <View style={{flex: 1}}>
          <View style={{flex: 1, backgroundColor: '#FFFFFF'}}>
            <Post></Post>

            {/* {searchHistory.length > 0 && (
              <ScrollView scrollY style={{ flex: 1 }}>
                <View
                  style={{
                    marginTop: '20rpx',
                    marginBottom: '20rpx',
                  }}
                >
                  <View
                    style={{
                      flexDirection: 'row',
                      justifyContent: 'space-between',
                    }}
                  >
                    <Text
                      style={{
                        color: '#666666',
                        fontSize: '24rpx',
                      }}
                    >
                      搜索历史
                    </Text>
                    <View
                      onClick={() => {
                        this.clickDeleteSearchHistory();
                      }}
                    >
                      <Image
                        style={{
                          width: '45rpx',
                          height: '45rpx',
                        }}
                        src={searchDel}
                      />
                    </View>
                  </View>
                  <View
                    style={{
                      marginTop: '20rpx',
                      flexDirection: 'row',
                      flexWrap: 'wrap',
                    }}
                  >
                    {searchHistory.map((item, index) => {
                      return (
                        <View
                          style={{
                            marginRight: '20rpx',
                            marginBottom: '20rpx',
                            borderRadius: '25rpx',
                            overflow: 'hidden',
                          }}
                          onClick={() => {
                            this.setState(
                              {
                                searchValue: item,
                              },
                              () => {
                                this.txtsearch.blur();
                                this.addSearchHistory();
                                this.GoodsSearchClick();
                              },
                            );
                          }}
                        >
                          <Text
                            style={{
                              color: '#333333',
                              backgroundColor: '#F0F0F0',
                              fontSize: '20rpx',
                              overflow: 'hidden',
                            }}
                          >
                            {item}
                          </Text>
                        </View>
                      );
                    })}
                  </View>
                </View>
              </ScrollView>
            )} */}
          </View>
        </View>
      </View>
    );
  }
}
